<script>
import {addGoods, updateGoods} from "@/api/project/goods";
import {listCategory} from "@/api/project/category";

export default {
  name: "add-goods",
  data() {
    return {
      form: {},
      rules: {
        name: [{required: true, message: '请输入商品名称', trigger: 'blur'}],
        price: [{required: true, message: '请输入商品价格', trigger: 'blur'}],
        address: [{required: true, message: '请输入发货地址', trigger: 'blur'}],
        category: [{required: true, message: '请选择分类', trigger: 'blur'}],
        img: [{required: true, message: '请上传商品图片', trigger: 'blur'}],
        content: [{required: true, message: '请输入商品详情', trigger: 'blur'}]
      },
      categoryList: []
    }
  },
  created() {
    listCategory({pageSize: 100}).then(res => this.categoryList = res.rows)
  },
  methods: {
    reset() {
      this.goods = {}
    },
    /** 提交按钮 */
    submitForm() {
      if (this.form.id != null) {
        updateGoods(this.form).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        });
      } else {
        addGoods(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.open = false;
          this.getList();
        });
      }
    },
  }
}
</script>
<template>
  <div>
    <el-card style="margin: 20px 20%">
      <div slot="header" class="clearfix">
        <div style="font: bolder 20px normal;text-align:center">
          发布商品
        </div>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <!-- 第一行 -->
          <el-col :span="12">
            <el-form-item label="商品名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入名称" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品价格" prop="price">
              <el-input v-model="form.price" placeholder="请输入价格" clearable>
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>

          <!-- 第二行 -->
          <el-col :span="12">
            <el-form-item label="发货地址" prop="address">
              <el-input v-model="form.address" placeholder="请输入发货地址" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属分类" prop="category">
              <el-select
                v-model="form.category"
                placeholder="请选择分类"
                style="width: 100%"
              >
                <el-option
                  v-for="item in categoryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 图片上传 -->
          <el-col :span="24">
            <el-form-item label="商品图片" prop="img">
              <image-upload v-model="form.img" :limit="1"/>
            </el-form-item>
          </el-col>

          <!-- 富文本编辑器 -->
          <el-col :span="24">
            <el-form-item label="商品详情" prop="content">
              <editor v-model="form.content" :min-height="192"/>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 操作按钮 -->
        <div class="form-footer">
          <el-button type="primary" @click="submitForm">发布商品</el-button>
          <el-button @click="reset">重置</el-button>
        </div>
      </el-form>
    </el-card>

  </div>
</template>

<style scoped lang="scss">
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.form-footer {
  text-align: right;
  padding: 20px 20px 0;
  border-top: 1px solid #ebeef5;
}

.el-form-item {
  margin-bottom: 22px;

  ::v-deep .el-form-item__content {
    line-height: normal;
  }
}
</style>

